<template>
  <div class="gedna">
    <router-view></router-view>
    <h1>{{ name }}</h1>
    <ul>
      <li v-for="(item, index) in res" :key="index" @click="bofang(item.al.id)">
        <img :src="item.al.picUrl" alt="" />
        <p>{{ item.name }}</p>
      </li>
    </ul>
    <audio :src="lianji" controls></audio>
  </div>
</template>

<script>
import { getGedan } from "@/api/hot.js";
import axios from "axios";
import list from "../../components/list.vue";
export default {
  components: { list },
  data() {
    return {
      res: "",
      lianji: "",
    };
  },
  async created() {
    console.log(this.$route);
    let { name, id } = this.$route.query;
    this.name = name;
    this.id = id;
    let res = await getGedan(this.id);
    this.res = res.playlist.tracks;
    console.log(res);
  },
  methods: {
    async bofang(id) {
      let res = await axios
        .get("/musicApi/song/url", {
          params: {
            id,
          },
        })
        .then((res) => res.data);
      console.log(res);
      console.log(res.data[0].url);
      if (res.data[0].url==null) {
          this.lianj = "http://m7.music.126.net/20211123221155/0571b6c879292e8e89381faad4aa6141/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3"
      } else {
          this.lianji =  res[0].url
      }
    },
  },
};
</script>

<style lang="less" scoped>
.gedna {
  text-align: center;
}
ul {
  width: 729px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
li img {
  width: 140px;
}
li {
  width: 140px;
  height: 204px;
  margin-left: 42px;
  margin-bottom: 30px;
  a {
    font-size: 14px;
    color: #000;
  }
}
p:hover {
  text-decoration: underline;
}
</style>